<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
<!-- v-for  循环遍历填充，基于一个数组渲染列表 -->
    <!-- <div id="app2">
	   <ul>
	      <li v-for="todo in todos">
	         {{ todo.text }}
	      </li>
	   </ul>
	</div> -->

	<!-- 在v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引 -->
	<!-- <ul id="example">
	   <li v-for="item in items">
	      {{ parentMessage }} - {{ $index }} - {{ item.message }}
	   </li>
	</ul> -->

	<!-- 可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量$key。 -->
	<ul id="repeat-object" class="demo">
	   <li v-for="value in object">
	      {{ $key }} : {{ value }}
	   </li>
	</ul>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	// new Vue({
	//   el:'#app2',
	//   data:{
	//     todos:[
	//       { text: 'Learn JavaScript' },
	//       { text: 'Learn Vue.js' },
	//       { text: 'Build Something Awesome' }
	//     ]
	//   }
	// });


	// var example = new Vue({
	//   el: '#example',
	//   data: {
	//     parentMessage: 'Parent',
	//     items: [
	//       { message: 'Foo' },
	//       { message: 'Bar' }
	//     ]
	//   }
	// });

    
    new Vue({
	  el: '#repeat-object',
	  data: {
	    object: {
	      FirstName: 'John',
	      LastName: 'Doe',
	      Age: 30
	    }
	  }
	});
</script>
</html>